<!--封装自带搜索框的树形菜单-->
<template>
    <div class="search-tree">
        <div class="search-input">
            <el-input placeholder="搜索" prefix-icon="el-icon-search" size="mini" v-model="searchText" style="width: 100%"></el-input>
        </div>
        <div style="height: 350px;overflow: auto">
            <el-tree
                class="filter-tree"
                :data="treeData1"
                :props="treeProps"
                default-expand-all
                :expand-on-click-node="false"
                :highlight-current="lightFlag"
                :filter-node-method="filterNode"
                ref="tree"
                @node-click="treeClick">
            </el-tree>
        </div>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {SEARCH_ADDROW_TREE} from '@api/url'
    export default {
        name: 'SearchTree',
        data () {
            return {
                lightFlag: true,
                treeData2: [
                    {
                        id: 1,
                        name: '常用函数',
                        children: [{
                            id: 2,
                            name: 'ABS',
                            enName: 'ABS',
                            description: '222'
                        }, {
                            id: 3,
                            name: 'IF',
                            enName: 'IF',
                            description: '222'
                        }, {
                            id: 4,
                            name: 'INT',
                            enName: 'INT',
                            description: '333'
                        }]
                    }, {
                        id: 5,
                        name: '数学和三角函数',
                        children: [{
                            id: 6,
                            name: 'ABS',
                            enName: 'ABS',
                            description: '333'
                        }, {
                            id: 7,
                            name: 'ACOS',
                            enName: 'ACOS',
                            description: '666'
                        }]
                    }
                ], // 第二列树形菜单
                treeData3: [
                    // {
                    //     id: 1,
                    //     name: '数值字段',
                    //     num: 4,
                    //     children: [{
                    //         id: 2,
                    //         name: '成本额',
                    //         enName: '11'
                    //     },{
                    //         id: 3,
                    //         name: '销售额',
                    //         enName: '22'
                    //     },{
                    //         id: 4,
                    //         name: '数量',
                    //         enName: '33'
                    //     }]
                    // },{
                    //     id: 5,
                    //     name: '文本字段'
                    // },{
                    //     id: 6,
                    //     name: '时间字段'
                    // }

                ], // 第三列树形菜单
                treeDataTemp: [],
                treeProps: { // 树形菜单格式化
                    label: 'name',
                    value: 'id',
                    children: 'children'
                }
            }
        },
        props: {
            searchText: {
                type: String
            },
            treeFlag: {
                type: Boolean,
                default () {
                    return true
                }
            },
            menuId: {
                type: String
            }
        },
        watch: {
            searchText (val) {
                this.$refs.tree.filter(val)
            }
        },
        computed: {
           treeData1 () {
                debugger
                return this.treeFlag === true ? this.treeData2 : this.treeData3
            }
        },
        methods: {
            // 树点击
            treeClick (data) {
                debugger
               if (data.name === '数值字段' || data.name === '文本字段' || data.name === '日期字段' || data.name === '聚合函数' || data.name === '数学和三角函数' ||
               data.name === '快速计算函数' || data.name === '日期函数' || data.name === '文本函数' || data.name === '逻辑函数' || data.name === '其他函数') {

               } else {
                   let param = {
                       clickData: data,
                       treeFlag: this.treeFlag,
                       allTreeData: this.treeConvertToAttr(this.treeData1)
                   }
                   this.$emit('getFilterValue', param)
               }
            },
            // 过滤树表单内容
            filterNode (value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
            // 后台获取公式函数树状数据
            getTreeData () {
                let param = {
                    modelId: this.menuId,
                    type: '1'
                }
                ajax.post(SEARCH_ADDROW_TREE, param).then(res => {
                    debugger
                    this.treeData2 = res.data.functionInfo
                    this.treeData3 = res.data.columnInfo
                    this.$emit('getColumnInfo', this.treeData3)
                }).catch(err => {
                    console.error(err, '查询错误！')
                })
            },
            // 树状结构转换为平级结构
            treeConvertToAttr (tree) {
                // debugger
                // let attrs = []
                // let result = []
                // attrs = attrs.concat(tree)
                // while (attrs.length) {
                //     let first = attrs.shift()
                //     if (first.children) {
                //         attrs = attrs.concat(first.children)
                //         delete first['children']
                //
                //     }
                //     result.push(first)
                // }
                debugger
                let result = []
                let attrs = []
                for (let i = 0; i < tree.length; i++) {
                    let tmpObj = Object.assign({}, tree[i])
                    if (tmpObj.children) {
                        delete tmpObj['children']
                        result.push(tmpObj)
                        for (let j = 0; j < tree[i].children.length; j++) {
                            result.push(tree[i].children[j])
                        }
                    } else {
                        result.push(tmpObj)
                    }
                }
                return result
            },
            resetData () {
                Object.assign(this.$data, this.$options.data.call(this))
            }

        },
        created () {
            // 初始化树
            debugger
            this.getTreeData()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .search-tree
        .search-input
            margin 10px 10px
            .el-input__inner
                border-radius 0
</style>
